<template>
  <div class="table_con">
    <a-table :row-key="record=>record.id" :columns="tableColumns" :data-source="tableList" :pagination="false" :loading="tableLoading">
      <template #input_name={record}>
        {{ record.input_name }}
      </template>
      <template #input_name_cus={record}>
        <a-input @input="(value)=>handleInputChange(value, record, 'input_name_cus')" style="width: 150px;" :disabled="!record.is_allow_modifie" v-model:value="tableList[record.index]['input_name_cus']" /> 
      </template>
      <template #is_enable={record}>
        <a-switch @change="handleInputChange(value, record, 'is_enable_show')" checked-children="启用" un-checked-children="禁用" v-model:checked="tableList[record.index]['is_enable_show']" />
      </template>
      <template #input_type={record}>
        <span v-if="record.input_type!='json' && record.input_type!='select' && record.input_type!='multi_select'">{{ inputType[record.input_type] }}</span>
        <a v-if="record.input_type=='json'" @click="showJson(record)">{{ inputType[record.input_type] }}</a>
        <a v-if="record.input_type=='select' || record.input_type=='multi_select'" @click="showJson(record)">{{ inputType[record.input_type] }}</a>
      </template>
      <template #is_required={record}>
        <a-switch @change="handleInputChange(value, record, 'is_required_show')" checked-children="必填" un-checked-children="非必填" v-model:checked="tableList[record.index]['is_required_show']" />
      </template>
      <template #sort={record}>
        <a-input-number @change="(value)=>handleInputChange(value, record, 'sort')" :min="0" v-model:value="tableList[record.index]['sort']" />
      </template>
    </a-table>
    <jsonModal :visible="skillVisible" :recordInfo="recordInfo" @close="closeSkill" />
  </div>
</template>
<script>
import store from "../../../store";
import {message} from "ant-design-vue";
import request from "../../../common/utils/request";
import jsonModal from "./modules/jsonModal.vue";
import { defineComponent, reactive, toRefs } from 'vue';
const tableColumns = [
  {
    title: '原始名称', 
    dataIndex: 'input_name', 
    key: 'input_name', 
    slots: {
      customRender: 'input_name',
    },
  },
  { 
    title: '自定义名称', 
    dataIndex: 'input_name_cus', 
    key: 'input_name_cus',
    slots: {
      customRender: 'input_name_cus',
    },
  },
  { title: '启用/禁用', 
    dataIndex: 'is_enable', 
    key: 'is_enable',
    slots: {
      customRender: 'is_enable',
    },
  },
  { 
    title: '输入框类型', 
    dataIndex: 'input_type', 
    key: 'input_type',
    slots: {
      customRender: 'input_type',
    },
  },
  { 
    title: '是否必填', 
    dataIndex: 'is_required', 
    key: 'is_required',
    slots: {
      customRender: 'is_required',
    },
  },
  { 
    title: '排序号(升序)', 
    dataIndex: 'sort', 
    key: 'sort',
    slots: {
      customRender: 'sort',
    },
  }
];
export default defineComponent({

  components: {
    jsonModal
  },

  setup(props, context) {
    const state = reactive({
      tableList: [],
      inputType: {},
      tableLoading: false,
      timeout: null,
      skillVisible: false,
      recordInfo: {}
    })

    const getList = () => {
      state.tableLoading = true
      request.get('/village', '/org/user/extend/field/list',{
        villageId: store.getters.buildingInfo.permissionBuildings[0].id
      }).then(res => {
        state.tableLoading = false
        state.tableList = res.formField
        state.inputType = res.inputType
        state.tableList.map((item, index)=>{
          item.index = index
          item.is_enable_show = item.is_enable?true:false
          item.is_required_show = item.is_required?true:false
        })
      }).catch(err=>{
        state.tableLoading = false
      })
    }

    const handleInputChange = (value, record, type) => {
      let flag = false
      if(type == 'is_enable_show' || type == 'is_required_show'){
        flag = true
      }
      debounce(()=>{
        let params = {
          villageId: store.getters.buildingInfo.permissionBuildings[0].id,
          field: type,
          id: record.id,
          value: record[type]
        }
        if(type == 'is_enable_show'){
          params.field = 'is_enable'
        }
        if(type == 'is_required_show'){
          params.field = 'is_required'
        }
        updateForm(params)
      }, 500, flag)
    }

    const debounce = (func, wait = 2000, immediate = false) => {
      if (state.timeout !== null) clearTimeout(state.timeout);
      // 立即执行，此类情况一般用不到
      if (immediate) {
        typeof func === "function" && func();
      } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        state.timeout = setTimeout(function () {
          typeof func === "function" && func();
        }, wait);
      }
    };
    
    const updateForm = (params) => {
      state.tableLoading = true
      request.put('/village', '/org/user/extend/update/field', params).then(res=> {
        state.tableLoading = false
        message.success('更新成功！')
      }).catch(e=>{
        message.error('更新失败！')
        state.tableLoading = false
      })
    }

    const showJson = (record) => {
      state.recordInfo = record
      state.skillVisible = true
    }

    const closeSkill = () => {
      state.recordInfo = {}
      state.skillVisible = false
    }

    getList()
    return {
      tableColumns,
      handleInputChange,
      showJson,
      closeSkill,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="less" scoped>
.table_con{
  width: 100%;
  background-color: #fff;
  padding: 20px;
}
</style>
